<template>
<div>
    <h1>文章新增</h1>
  <Form
    ref="formValidate"
    :model="formValidate"
    :rules="ruleValidate"
    :label-width="80"
    class="main"
  >
    <FormItem label="文章名称" prop="title">
      <Input v-model="formValidate.title" placeholder="Enter Title"></Input>
    </FormItem>
    <FormItem label="作者" prop="anthor">
      <Input
        v-model="formValidate.anthor"
        placeholder="Enter your name"
      ></Input>
    </FormItem>
    <FormItem label="头像" prop="city">
      <Input
        v-model="formValidate.avatar"
        placeholder="Enter your e-mail"
        disabled
      ></Input>
    </FormItem>
    <FormItem label="时间">
      <Row>
        <Col span="11">
          <FormItem prop="date">
            <DatePicker
              type="datetime"
              placeholder="Select date"
              v-model="formValidate.date"
              format="yyyy-MM-dd HH:mm:ss"
              @on-change="showtime"
            ></DatePicker>
          </FormItem>
        </Col>
      </Row>
    </FormItem>

    <FormItem label="内容" prop="desc">
      <Input
        v-model="formValidate.desc"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 5 }"
        placeholder="Enter something..."
      ></Input>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('formValidate')"
        >确定</Button
      >
      <Button @click="handleReset('formValidate')" style="margin-left: 8px"
        >重置</Button
      >
    </FormItem>
  </Form>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      valuedate: '',
      formValidate: {
        title: '',
        avatar: 'http://localhost:8080/img/me.8a3796dd.jpg',
        anthor: '',
        date: '',
        time: '',
        desc: ''
      },
      ruleValidate: {
        title: [
          {
            required: true,
            message: 'The title cannot be empty',
            trigger: 'blur'
          }
        ],
        anthor: [
          {
            required: true,
            message: 'Please Enter Your name',
            trigger: 'blur'
          }
        ],
        date: [
          {
            required: true,
            type: 'date',
            message: 'Please select the date',
            trigger: 'change'
          }
        ],
        time: [
          {
            required: true,
            type: 'string',
            message: 'Please select time',
            trigger: 'change'
          }
        ],
        desc: [
          {
            required: true,
            message: 'Please enter a personal introduction',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 20,
            message: 'Introduce no less than 20 words',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    showtime(date) {
      console.log(date)
      this.valuedate = date
      console.log(this.valuedate)
    },
    handleSubmit(name) {
      const params = new URLSearchParams()
      params.append('title', this.formValidate.title)
      params.append('description', this.formValidate.anthor)
      params.append('avatar', this.formValidate.avatar)
      params.append('datatime', this.valuedate)
      params.append('content', this.formValidate.desc)
      this.$refs[name].validate((valid) => {
        if (valid) {
          axios
            .post('/liz/addAnthor_art', params)
            .then((res) => {
              if (res.data.status === 200) {
                console.log(res)
                this.$Message.success('新增成功')
                this.$refs.formValidate.resetFields()
              } else {
                console.log(res.data.message)
              }
            })
            .catch((err) => {
              console.error(err)
            })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    handleReset(name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  margin: 0 auto;
  text-align: center;
  width: 500px;
}
</style>
